import type { Ref } from "vue";
import { unref } from "vue";


const isWindow = (val: unknown) => val === window

function makeDOMRect(width: number, height: number) {
    return {
        top: 0,
        left: 0,
        right: width,
        bottom: height,
        width,
        height
    }
}


/**
 * 获取页面中元素的左，上，右和下分别相对浏览器视窗的位置
 * @param elementRef 传入的元素
 * @returns { top, left, right, bottom, width, height }
 * getBoundingClientRect() 返回的是矩形的集合。
 * 表示了当前盒子在浏览器中的位置以及自身占据的空间的大小，除了 width 和 height 之外，
 * 其他的属性是相对于视图窗口的左上角 来计算的。如：
 * bottom是盒子 底部边框 距离 视口顶部 的距离
 * right是盒子 右侧边框 距离 视口左侧的距离
 */
export function useRect(elementRef: Element | Window | Ref<Element | Window>) {
    const element = unref(elementRef)

    // 判断是不是window对象，是的话要转成DOM，因为window没有getBoundingClientRect方法
    if (isWindow(element)) {
        const { innerWidth, innerHeight } = element as Window
        return makeDOMRect(innerWidth, innerHeight)
    }

    // 是element元素且有getBoundingClientRect方法时
    if ((element as Element).getBoundingClientRect) {
        return (element as Element).getBoundingClientRect()
    }

    return makeDOMRect(0, 0)
}